<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/image.viewer.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav public-green-bgcolor header-no-shadow header-txt-color">
		<a class="mui-icon mui-icon-left-nav mui-pull-left go_back"></a>
		<a class="mui-icon mui-icon-person mui-pull-right"></a>
	    <h1 class="mui-title" id="chat_who">burtyang</h1>
	</header>
	
	<div class="mui-content mui-scroll-wrapper" id="chat_content">
		<!--聊天窗口-->
	    <div class="chat-box mui-scroll">
    		<div class="public-chat-box public-chat-box-my">
	    		<p class='chat-time'><span>10:00</span></p>
	    		<div class="chat-txt chat-txt-right">
	    			<img class='avatar' src="../images/touxiang2.jpg"/>
		    		<div class="public-chat-content">
		    			<div class="box-background">
			    			<span class="mui-icon chaticonfont chat_icon-youbian"></span>
			    			<span class='txt_click'>你好</span>
			    		</div>
			    		<div class="clear"></div>
		    		</div>
	    		</div>
	    	</div>
			<div class="public-chat-box public-chat-box-my">
	    		<p class='chat-time'><span>10:00</span></p>
	    		<div class="chat-txt chat-txt-right">
	    			<img class='avatar' src="../images/touxiang2.jpg"/>
		    		<div class="public-chat-content">
		    			<div class="box-background">
			    			<span class="mui-icon chaticonfont chat_icon-youbian"></span>
			    			<span class='txt_click'>八百标兵奔北坡，炮兵并排北边跑，
								炮兵怕把标兵碰，标兵怕碰炮兵炮
			    			</span>
			    		</div>
			    		<div class="clear"></div>
		    		</div>
	    		</div>
	    	</div>
	    </div>
	</div>
	
	<!--输入框-->
    <div class="chat-bottom-input mui-row">
    	<div class="mui-col-xs-1 grid camera" id="catch_photo"> 
    		<span class="mui-icon mui-icon-camera"></span>
    	</div>
    	<div class="mui-col-xs-9 grid">
    		<form class="mui-input-group" action="javascript:;">
				<!--只需要在input控件上添加.mui-input-speech类即可语音输入(语音转文字)-->
				<div class="mui-input-row">
					<input id="input_text" type="text" class="mui-input-clear mui-input-speech" placeholder="语音输入">
				</div>
			</form>
            
        </div>
        <div class="mui-col-xs-2 grid message">
        	<span class="mui-icon mui-icon mui-icon-mic-filled speech active"></span>
            <button class="public-g-g-btn">发送</button>
        </div>
	</div>
	
	
	<!--说话时的框-->
	<div class="sound-box"></div>


<script src="../lib/js/mui.min.js" type="application/javascript"></script>
<script src="../lib/js/mui.zoom.js" type="application/javascript"></script>
<script src="../lib/js/mui.previewimage.js" type="application/javascript"></script>
<script src='../lib/js/my_plugin.js' type="application/javascript"></script>
<script src='../lib/js/jquery-3.2.1.min.js' type="application/javascript"></script>
<script src='../js/my_sound_recorder-jq-mui.js' type="application/javascript"></script>
<script type="application/javascript">

$(function(){
	
	//录音事件
	var burt_msg_obj = burt_sound_record($('.sound-box'), $('.chat-box'));
	burt_msg_obj.init();
	
	//图片预览
	castapp.imageViewer();
	
	//点击返回键
	$('.go_back').get(0).addEventListener('tap',function(e){
		e.preventDefault();
		mui.back();
	});
	
	//监听输入框的内容
	$('#input_text').get(0).oninput = function(e){
		e.stopPropagation();
		var val = $(this).val().trim();
		var $message= $('.grid.message');  //消息盒子
		if(val){
			$message.find('button').addClass('active');
			$message.find('span').removeClass('active');
		}else{
			$message.find('button').removeClass('active');
			$message.find('span').addClass('active');
		}
	};
	
	
	//点击图片/相机
	$('#catch_photo').get(0).addEventListener('tap',function(e){
		e.preventDefault();
		mui.plusReady(function(){
			castapp.actionSheet(['照相机','相册'],{
				succFn:function(data){
				    //手机上的图片路径
					//console.log(data);
					//上传后的图片路径
					burt_msg_obj.sendMsg({
						data: {
							path: data
						},
						type: 'image',
						sender: '_self'
					});
				},
				errFn:function(data){
					//console.log(data);
					castapp.prompt('选择失败,请重新选择');
				},
				//是否开启上传
				//isUpload:true,
				//上传地址
				//uploadUrl:'http://peipao.dongyixueyuan.com/upload_file.php',
				
			});
		});
	});
			
			
	
	//点击发送按钮
	$('.grid.message button').get(0).addEventListener('tap',function(e){
		e.preventDefault();
		var inp_val = $('#input_text').val().trim();
		if(!inp_val){
			castapp.prompt('请输入内容后发送');
			return;
		}
		$('#input_text').val('');
		var $message= $('.grid.message');  //消息盒子
		$message.find('button').removeClass('active');
		$message.find('span').addClass('active');
		burt_msg_obj.sendMsg({
			data: inp_val,
			type: 'txt',
			sender: '_self'
		});
		
	});
			
	
	
	
});
</script>

</body>
</html>